<template>
  <div>
    <!-- 人脸扫描 -->
    <div
      class="face"
      :style="{
        'margin-top': marginTop + 'vh',
      }"
      v-if="measureStatus == 1"
    >
      <el-card class="item">
        <template #header>
          <div class="title">
            <div class="flex justify-center items-center">
              <svg
                t="1752730893335"
                class="w-[0.8rem] h-[0.8rem]"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6229"
                width="128"
                height="128"
              >
                <path
                  d="M727.137051 421.398925a217.179701 217.179701 0 1 0-217.164418 217.026866 217.363104 217.363104 0 0 0 217.164418-217.026866z m-373.026388 0a155.892537 155.892537 0 1 1 155.892537 155.785553 155.999522 155.999522 0 0 1-155.892537-155.785553z m256.764179 0a100.871642 100.871642 0 1 0-100.871642 100.871642 101.009194 101.009194 0 0 0 100.886925-100.871642z m-140.608955 0a39.615045 39.615045 0 1 1 39.615044 39.584478 39.660896 39.660896 0 0 1-39.523343-39.584478z m152.025791 465.87415V796.274627A405.733254 405.733254 0 1 0 106.272096 406.084776a395.844776 395.844776 0 0 0 301.48394 391.565373v91.181851a8.803343 8.803343 0 0 1-1.253254-0.091701h-2.506507c-90.173134 15.283582-178.282985 43.22197-178.282985 103.714388a31.040955 31.040955 0 0 0 30.246209 31.484179 29.757134 29.757134 0 0 0 30.399044-29.848836c6.037015-14.748657 84.472358-51.765493 233.838806-51.765493s227.908776 37.07797 233.747105 50.435821a30.643582 30.643582 0 1 0 61.287164 0c0.061134-63.946507-97.448119-93.856478-192.848239-105.487283zM165.052752 406.084776a344.919881 344.919881 0 1 1 344.919881 344.751761A345.240836 345.240836 0 0 1 165.052752 406.084776z m396.012896 476.022448a743.699104 743.699104 0 0 0-38.331224-1.039284c-17.19403 0-38.31594 0.580776-53.645373 1.895164v-70.824119h91.976597v69.968239z"
                  fill="#1296db"
                  p-id="6230"
                ></path>
              </svg>
              <span>正面</span>
            </div>

            <div>
              <!-- <el-button type="primary" @click="handleStartCamera"
                >开启摄像头</el-button
              > -->
              <el-button type="primary" @click="startMeasure"
                >关闭摄像头并开始测量</el-button
              >
            </div>
          </div>
        </template>
        <template #default>
          <!-- <div class="video">视频影像</div>  -->
          <VideoImage
            ref="videoCanvas"
            class="w-full"
            style="height: calc(100vh - 13.5rem)"
          />
        </template>
      </el-card>
    </div>

    <MeasureSuccess v-show="measureStatus == 2" />
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect, onBeforeUnmount, h } from "vue";
import {
  ElMessage,
  ElMessageBox,
  ElNotification,
  ElLoading,
} from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";

import MeasureSuccess from "./component/MeasureSuccess.vue";
import VideoImage from "./component/VideoImage.vue";

onMounted(() => {
  marginTop.value = 70 / 50;
});

const useStore = useUserStore();
const { measureStatus } = storeToRefs(useStore);

const videoCanvas = ref(null);
// 开始测量 / 关闭摄像头
const startMeasure = () => {
  videoCanvas.value?.handleCapturePicture(1);
  videoCanvas.value?.stopCamera(1);
  useStore.updateMeasureStatus(2);
};

const handleStartCamera = () => {
  videoCanvas.value?.startCamera(1);
};

// 根据屏幕尺寸，动态控制上边距
const marginTop = ref(7);
window.addEventListener("resize", () => {
  marginTop.value = 70 / 50;
});

onBeforeUnmount(() => {
  videoCanvas.value?.stopCamera(1);
});
</script>

<style scoped lang="scss">
.face {
  height: calc(100vh - 8.5rem) !important;
  @apply w-[99%] mx-auto flex justify-center items-center;
  .item {
    @apply w-[70%] h-full;

    .title {
      @apply flex justify-between items-center;
      span {
        @apply ml-1;
      }
    }

    .video {
      @apply w-full h-[50vh] flex justify-center items-center;
    }
    .right-text {
      background-color: pink;
      @apply w-full  flex flex-col justify-between;
    }
  }

  .item :deep(.el-card__header) {
    @apply py-[0.7rem];
  }
  .item :deep(.el-card__footer) {
    @apply py-[0.5rem] px-[0.5rem];
  }
}
</style>